<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2019-10-22 16:29:09
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-05 10:48:18
 -->
<template>
  <div class="simple-select">
    <vxe-grid
      ref="table"
      size="mini"
      highlight-hover-row
      highlight-current-row
      header-row-class-name="header-row"
      :columns="columnsData"
      :data="tableData.default"
      :loading="tableLoading.default"
      v-bind="$attrs"
      v-on="$listeners"
    />
    <div class="text-center">
      <el-pagination
        mini
        layout="prev, pager, next"
        :total="pageInfo.total"
      />
    </div>
  </div>
</template>

<script>
import { oftenuse } from '@/libs/mixins'
import _ from 'lodash'

export default {
  name: 'CustomerSupplierSelect',
  mixins: [oftenuse],
  props: {
    keywords: {
      type: String,
      default: null
    },
    columnsData: {
      type: Array,
      default: () => { return [] }
    },
    postMethod: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      dataObj: {}
    }
  },
  computed: {
  },
  created() {
    this.$once('hook:beforeDestroy', () => {
    })
  },
  mounted() {
    this.searchGoods(this.keywords)
  },
  destroyed() {
  },
  methods: {
    searchGoods: _.debounce(function(value) {
      const params = value
      this.listData(params)
    }, 300),
    listData(params = '') {
      this.setTableLoading('default', true)
      return new Promise((resolve, reject) => {
        this.postMethod(params).then(res => {
          const records = res.data.data || []
          this.setTableData('default', records)
          // this.pageInfo.total = res.data.total
          this.setTableLoading('default', false)
          if (records.length > 0) {
            this.$refs.table.setCurrentRow(records[0])
          }
          resolve(res)
        }).catch(err => {
          reject(err)
          this.setTableLoading('default', false)
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
$vxe-table-row-height-mini: 10px;
.simple-select{
  background: #fff;
  border: #419efb 2px solid; overflow: auto;
  /deep/.vxe-table.size--mini .vxe-body--column:not(.col--ellipsis), .vxe-table.size--mini .vxe-footer--column:not(.col--ellipsis), .vxe-table.size--mini .vxe-header--column:not(.col--ellipsis){
    padding: 0;
  }
  /deep/.vxe-body--column{
    height: 18px !important;
  }
}
</style>
